import React from 'react'
import './GoodsImage.css';

export default function GoodsImage() {
  // 状态实现
  let [index, setIndex] = React.useState(0);

  //所有的小图
  let arr = [
    '/goods/1.jpg',
    '/goods/2.jpg',
    '/goods/3.jpg',
    '/goods/4.jpg',
    '/goods/5.jpg',
  ]

  //声明函数 事件回调
  let handleMouseOver = (index) => {
    //返回函数 事件回调
    return () => {
      //修改状态 index
      setIndex(index);
    }
  }

  return (
    <div className='goods-image'>
      <div className="big-image">
        <img src={arr[index]} alt="" />
      </div>
      <div className="small-images">
        {
          arr.map((item, key) => {
            return <div onMouseOver={handleMouseOver(key)} className="item" key={key}>
              <img className={ key === index ? 'active' : ''} src={item} alt='' />
            </div>
          })
        }
      </div>
    </div>
  )
}
